{% extends base.html %}

{% block head %}
<script src="/static/lib/codemirror/codemirror.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="/static/lib/codemirror/mode/sql.min.js"></script>
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: 300px;
}
</style>
{% end %}

{% block body %}
<div>
    <textarea id="editor" style="height:300px;"></textarea>
</div>

<div>
    <button class="btn btn-primary">Run</button>
</div>

<script type="text/javascript">
$("#menu-analyze").addClass("active");
$(function () {
    var editor = $("#editor")[0];
    var codeMirror = CodeMirror.fromTextArea(editor, {
        lineNumbers:true,
        mode: "text/x-sql",
        theme:"monokai"
    });
})
</script>
{% end %}